<template>
<div class="addAgent">
  <el-dialog :close-on-click-modal="false" modal-append-to-body
             lock-scroll
             top="10%"
             :title="$t('config.agent.addAgent')"
             :visible.sync="dialogVisible"
             width="30%"
             @close="closeDailog">
    <p class="note" v-show = "$store.state.oemObj.oemFlag">{{$t('config.agent.addAgentTipOem')}}</p>
    <div v-show = "!$store.state.oemObj.oemFlag">
      <p class="note">{{$t('config.agent.addAgentTip')}}</p>
      <p class="legend" v-html="$t('config.agent.templateTip')"></p>
      <div class="temp">
        <h3>{{$t('config.agent.template')}}</h3>
        <p>{{$t('config.agent.homAge')}}</p>
        <p class="tent">{{$t('config.agent.SelfIntroduction')}}</p>
        <p class="tent">{{$t('config.agent.detaileTip')}}</p>
        <p class="tent">{{$t('config.agent.temp1')}}</p>
        <p class="tent">{{$t('config.agent.temp2')}}</p>
        <p class="tent">{{$t('config.agent.temp3')}}</p>
        <p class="tent">{{$t('config.agent.temp4')}}</p>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click.stop="closeDailog" class="primary_btn">确定</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script>
  export default {
    name: 'AddAgent',
    data () {
      return {
        dialogVisible: false
      }
    },
    props: {
      isAdd: Boolean
    },
    watch: {
      isAdd () {
        this.dialogVisible = this.isAdd
      }
    },
    methods: {
      closeDailog () {
        this.$emit('close')
      }
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../../../../assets/common.styl"
  .addAgent
    p
      font-size 12px
      line-height 20px
    .note
      color $c-prompt
    .legend
      span
        font-weight bold
    .temp
      background $c-back
      padding 16px 18px
      border-radius 4px
      margin-top 18px
      h3
        font-size 14px
        margin-bottom 10px
      .tent
        text-indent 2em
    .dialog-footer
      text-align center

</style>
